<template>
	<div class="leftMenu">
		<!-- 扫码枪扫码区域 -->
		<div class="codeScanning">
			<el-input v-model="codeScanning" placeholder="扫码枪扫码使用" :size="size" :disabled="codeScanningOnOff" @input="codeScanningChange" clearable ></el-input>
		</div>
		
		<div class="l-top">
			<div class="t-left">
				<div v-if="connect.loading" class="icon-loading">
					<i class="el-icon-loading"></i>
				</div>
				<el-image v-else class="top-image" :src="src"></el-image>
				<el-button class="share-button" type="text" size="small" @click="clinkDevice">{{connect.data}}</el-button>
			</div>
			<el-badge is-dot class="item" :type="connect.connect?'primary':'danger'"></el-badge>
		</div>
		<el-scrollbar style="height: calc(100vh - 210px);width: 100%;">
			<div v-for="(item,index) in appMenuList" :key="item.id" class="lz-bton">
				<el-button type="text"  :disabled="item.disabled">{{item.name}}</el-button>
			</div>
		</el-scrollbar>
		<div class="l-btn">
			<template v-if="resetShow">
				<el-button type="primary" @click="resetFn" :disabled="btn.resetDisabled" style="width: 80%;">重置</el-button>
			</template>
			<template v-else>
				<el-button type="primary" :disabled="btn.startDisabled" @click="startFn" style="width: 80%;">开始</el-button>
				<el-button type="info" v-if="btn.preserveDisabled" @click="preserveFn" style="width: 40%;">保存</el-button>
			</template>
		</div>
	</div>
</template>

<script>
	let that,appMenuList
	import {
		mapGetters,
		mapActions,
	} from 'vuex'
	import bus from "/static/js/bus.js"
	const pathNew = require("path");
	const fs = require("fs");
	export default {
		name: 'leftMenu',
		components: {},
		computed: {
			...mapGetters(['size','appType','appMenuList','codeScanningOnOff'])
		},
		data() {
			return {
				codeScanning:'',
				src: require('/static/images/icon_link.png'),
				resetShow:false,//重置按钮显示
				btn: {
					allDisabled:true,//全选
					startDisabled:true,//开始按钮
					preserveDisabled: false, //保存按钮
					resetDisabled:false,//重置按钮
				},
				connect: {
					loading:false,
					connect: false, //是否连接成功
					data: '点击链接设备' //描述
				},
			}
		},
		watch:{
			appMenuList(newdata){
				console.log(newdata);
				that.setAppMenuList(newdata)
			}
		},
		mounted() {
			that = this
			bus.$on('homeToMenu', (res) => {
				console.log(res);
				if (res.action == 'connect') {
					that.connect = res
					//当前是否连接成功
					that.connectFn(res.connect)
				}
				if (res.action == 'preserve') {//显示保存按钮
					that.btn.preserveDisabled = res.preserveDisabled
				}
			})
			//读取APP检测配置
			that.readFileApp()
			
		},
		methods: {
			...mapActions('app',['setAppType','setAppTime','setAppMenuList','setAppVersionList','setCodeScanning','setAppConfig']),
			//扫码枪扫码
			codeScanningChange(){
				console.log(that.codeScanning.length);
				that.$lizhao.debounce(()=>{
					if(that.codeScanning.length==24){
						//点击连接设备
						that.clinkDevice()
						//设置扫码枪值
						that.setCodeScanning(that.codeScanning)
					}else{
						//设置扫码枪值
						that.setCodeScanning(that.codeScanning)
					}
				},500)
			},
			//当前是否连接成功
			connectFn(onoff){
				console.log(onoff);
				if(onoff){//如果连接成功
					that.btn={
						allDisabled:false,//全选
						startDisabled:false,//开始按钮
						preserveDisabled: false, //保存按钮
						resetDisabled:false,//重置按钮
					}
				}else{
					that.btn={
						allDisabled:true,//全选
						startDisabled:true,//开始按钮
						resetDisabled:true,//重置按钮
						preserveDisabled: false, //保存按钮
					}
					//默认全部禁选
					appMenuList = appMenuList.map(res=>{
						res.disabled=true
						return res
					})
					that.setAppMenuList(appMenuList)
				}
			},
			//读取菜单配置
			readFile() {
				fs.readFile(process.cwd() + `/cwd/config${that.appType}.js`, function(err, data) {
					if (err) {
						that.$message.warning(`读取配置文件失败，请确保cwd目录中含有【config${that.appType}.js】`)
					}
					appMenuList=data?JSON.parse(data.toString()):[]
					//默认全部禁选
					that.connectFn(false)
				})
			},
			//读取APP检测配置
			readFileApp() {
				fs.readFile(process.cwd() + '/cwd/appConfig.json', function(err, data) {
					if (err) {
						that.$message.warning('读取配置文件失败，请确保cwd目录中含有【appConfig.js】')
					}
					let string= JSON.parse(data.toString())
					that.setAppType(string.appType)//当前工站
					that.setAppTime(string.appTime)//跳过时间
					that.setAppVersionList(string.appVersionList)//设置比对版本
					that.setAppConfig(string)//设置appConfig。js下的所有参数
					//fs文件操作
					that.readFile()
					if(string.appType=='FT6'){
						that.resetShow=true
						//默认全部禁选
						that.connectFn(false)
					}
				})
			},
			//开始检测
			startFn() {
				let arr= this.appMenuList.filter(item=>item.disabled==false)
				let data = {
					action: 'startTesting',
					data: arr
				}
				bus.$emit('menuMsseage', data)
			},
			//点击连接设备
			clinkDevice() {
				that.connect.loading=true
				let data = {
					action: 'connectDevice',
					data: true,
					menuData: that.appMenuList
				}
				bus.$emit('menuMsseage', data)
			},
			//重置数据
			resetFn(){
				let data = {
					action: 'resetData',
					data: true
				}
				bus.$emit('menuMsseage', data)
			},
			//保存数据
			preserveFn(){
				that.btn.preserveDisabled=false
				let data = {
					action: 'preserveData',
					data: true,
				}
				bus.$emit('menuMsseage', data)
			}
		}
	}
</script>

<style lang="scss">
	.leftMenu {
		width: 100%;
		height: 100%;
		position: relative;
		.codeScanning{
			padding: 5px;box-sizing: border-box;
		}
		.l-top {
			width: 100%;
			height: 50px;
			background-color: #247CFF;
			align-items: center;
			display: flex;
			padding: 0 15px;
			box-sizing: border-box;
			justify-content: center;
			position: relative;
			.t-left {
				display: flex;
				justify-content: center;
				.icon-loading{
					display: flex;align-items: center;color: #fff;
				}
				.top-image {
					width: 30px;
					height: 30px;
				}

				.share-button {
					color: #fff;
				}
			}

			.item {
				position: absolute;
				right: 10px;
				top: 10px;
			}

		}
		.lz-checkbox{
			margin-left: 10px;margin-top: 10px;
		}
		.lz-bton {
			display: flex;padding-left: 30px;
		}

		.l-btn {
			position: absolute;padding: 0 5px;box-sizing: border-box;
			bottom: 20px;
			width: 100%;
			display: flex;
			justify-content: space-around;
		}

	}
</style>
